<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11 点击隐藏CSS</title>
  <style>
    .search {
      background: pink;
      width: 258px;
      height: 40px;
      margin: 100px auto;
    }

    .search input {
      width: 208px;
      height: 40px;
      background: url(images/left.jpg) no-repeat;
      border: 0;
      padding: 0;
      outline-style: none;
      padding-left: 8px;
      color: #cccccc;
      float: left;
    }

    .search input::placeholder {
      color: #cccccc;
    }

    .search button {
      height: 40px;
      width: 42px;
      background: url("images/right.jpg") no-repeat;
      float: left;
      cursor: pointer; /*鼠标手*/

    }


  </style>
  <script>
    window.onload = function () {
      var txt = document.getElementById("txt");
      txt.onfocus = function () {
        if (txt.value == "请输入") {
          txt.value = "";
          txt.style.color = "#333"
        }
      };
      txt.onblur = function () {
        if (txt.value == "") {
          txt.value = "请输入";
          txt.style.color = "#ccc"
        }
      }
    }
  </script>
</head>
<body>
<div class="search">
  <input type="text" value="请输入" id="txt">
  <button></button>
</div>
</body>
</html>